<template>
    <div class="demos">
        <v-scroll :on-infinite="infinite"  :on-refresh = "refresh" ref="my_scroller" :dataList="scrollData" v-if="$route.query.status === 'dynamic'" id="demoId">
            <div class="lesson_lists">
                <template v-for="(item,index) of demos">
                    <router-link tag="div" class="list" :to="{name: 'DemoDetail', params:{demoid:item.id}}" :key="index">
                        <div class="list_text">
                            <div class="list_title">{{item.title}}</div>
                            <div class="list_time">{{item.create_time}}</div>
                        </div>
                        <div class="list_img" v-if="item.img">
                            <img :src="item.img" alt="">
                        </div>
                    </router-link>
                </template>
            </div>
        </v-scroll>
        <div class="branch_lists" v-if="$route.query.status === 'statistics'">
          <group>
              <cell :title="item.user_login"  v-for="(item,index) of lessons" :key="index" :link="{name: 'PersonDemo', params: {personid:item.teacher_id}}">
                  <img slot="icon" src="./dangyuan.png" alt="" class="weui-cell_icon">
                  <p><span>{{item.num}}</span>/<span class="counts">2节课</span></p>
              </cell>
          </group>
        </div>
        <div v-transfer-dom>
          <popup v-model="isShow" position="right" @on-hide="hidePopup()">
            <div class="chooseBox">
              <div class="box_title">条件筛选</div>
              <div class="box_classify">
                <div class="box_time">
                  <!--<div class="classify_name">时间</div>-->
                  <div class="classify_date">
                    <!-- <checker v-model="selectedDate" default-item-class="normal_date" selected-item-class="selected_date">
                      <checker-item :value="item" v-for="(item, index) in dateClass" :key="index">{{item.value}}</checker-item>
                    </checker> -->
                    <group class="select_year">
                      <datetime v-model="years" title="选择年份" format="YYYY"  :placeholder="defyear"></datetime>
                    </group>


                  </div>
                </div>
              </div>
              <div class="box_button">
                <x-button type="primary" @click.native="choosedData">确定</x-button>
              </div>
            </div>
          </popup>
        </div>
    </div>
</template>

<script>
import {
  TransferDom,
  Group,
  Cell,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  XButton
} from "vux";
import VScroll from "../pull-refresh";
import { ModelListSelect } from "vue-search-select";
import { mapState, mapGetters } from "vuex";
export default {
  directives: {
    TransferDom
  },
  components: {
    Group,
    Cell,
    Popup,
    Checker,
    CheckerItem,
    Datetime,
    ModelListSelect,
    XButton,
    VScroll
  },
  computed: {
    ...mapGetters([
      "demoPopup",
      "demosList",
      "demosTotal",
      "demosPerson",
      "demoScrollTop",
      "demoSelect"
    ])
  },
  data() {
    return {
      page: 1,
      num: 10,
      scrollData: {
        noFlag: false //暂无更多数据显示
      },
      demos: [],
      lessons: [],
      isShow: false,
      selectedDate: { key: 1, value: "本年" },
      dateClass: [
        {
          key: 1,
          value: "本年"
        },
        {
          key: 2,
          value: "去年"
        }
      ],
      years: "",
      defyear: ""
    };
  },
  created() {
    this.defyear = `${new Date().getFullYear()}`;
    if (this.$route.query.status === "dynamic") {
      this.$store.dispatch("getDemosList");
    } else if (this.$route.query.status === "statistics") {
      this.$store.dispatch("getDemosPerson");
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.status == "dynamic") {
        this.box = this.$el.querySelector("#demoId");
        this.box.addEventListener("scroll", this.handler, false);
      }
    });
  },
  activated() {
    this.demos = this.demosList;
    this.lessons = this.demosPerson;
    this.$nextTick(() => {
      if (this.$route.query.status == "dynamic") {
        this.box = this.$el.querySelector("#demoId");
        this.box.scrollTop = this.demoScrollTop;
      }
    });
  },
  beforeDestroy() {
    this.box && this.box.removeEventListener("scroll", this.handler, false);
  },
  watch: {
    demoPopup: function(val) {
      this.isShow = val;
    },
    demosList: function(val) {
      this.demos = val;
    },
    demosPerson: function(val) {
      this.lessons = val;
    },
    demoSelect: function(val) {
      this.lessons = val;
    },
    // demos: function(val) {
    //   if (this.demosTotal <= this.num || val.length >= this.demosTotal) {
    //     this.scrollData.noFlag = true;
    //   }
    // },
    page: function(val) {
      let total = Math.ceil(this.demosTotal / this.num);
      if (val > total) {
        this.scrollData.noFlag = true;
      }
    },
    years: function(val) {
      if (val) {
        this.selectedDate = {};
      }
    },
    selectedDate: function(val) {
      if (Object.keys(val).length) {
        this.years = "";
      }
    },
    $route(to, from) {
      if (to.query.status === "dynamic" && to.path == "/demonstrate") {
        if (this.demosList.length == 0) {
          this.$store.dispatch("getDemosList");
        }
        this.$nextTick(() => {
          this.box.scrollTop = this.demoScrollTop;
        });
      } else if (
        to.query.status === "statistics" &&
        to.path == "/demonstrate"
      ) {
        this.$store.dispatch("getDemosPerson");
        this.box && this.box.removeEventListener("scroll", this.handler, false);
      }
    }
  },
  methods: {
    handler() {
      if (this.$route.query.status === "dynamic") {
        this.box = document.querySelector("#demoId");
        this.$store.dispatch("updateDemosPosition", this.box.scrollTop);
      }
    },
    refresh(done) {
      this.$store.dispatch("getDemosList");
      this.page = 1;
      done();
    },
    infinite(done) {
      this.page++;
      let end = this.num * this.page;
      let i = end - this.num;
      let more = this.$el.querySelector(".load-more");
      this.$store.dispatch("getDemosList", { page: this.page }).then(() => {
        for (i; i < end; i++) {
          if (end >= this.demosTotal) {
            more.style.display = "none"; //隐藏加载条
            // this.scrollData.noFlag = true;
            break;
          } else {
            more.style.display = "none"; //隐藏加载条
          }
        }
      });
      done();
    },
    hidePopup() {
      this.$store.dispatch("updateDemoPopup", {
        demoPopup: false
      });
    },
    defyears() {
      return new Date().getFullYear();
    },
    choosedData() {
      this.$store.dispatch("updateDemoPopup", {
        demoPopup: false
      });

      if (this.years) {
        this.$store.dispatch("getDemoSelect", { time: this.years });
      } else {
        this.years = new Date().getFullYear();
        this.$store.dispatch("getDemoSelect", { time: this.years });
      }
      console.log(this.years);
      // this.selectedDate = { key: 1, value: "本年" };
      this.years = "";
    }
  }
};
</script>

<style lang="less">
.demos {
  width: 100%;
  height: 100%;
  padding: 2.75rem 0 0;
  font-size: 0;
  background: rgb(245, 245, 249);
  position: relative;
  .yo-scroll {
    top: 2.75rem;
  }
  .lesson_lists {
    margin-top: 0.75rem;
    padding: 0 0.625rem 0;
    background: rgb(255, 255, 255);
    .list {
      box-sizing: border-box;
      width: 100%;
      /*padding: .25rem .75rem;*/
      padding: 0.25rem 0;
      display: flex;
      border-bottom: 1px solid rgb(237, 238, 240);
    }
    .list_img {
      width: 7rem;
      height: 3.9375rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .list_text {
      flex: 1;
      .list_title {
        font-size: 1.0625rem;
        color: rgb(51, 51, 51);
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      .list_time {
        margin-top: 0.625rem;
        font-size: 0.875rem;
        color: rgb(153, 153, 153);
      }
    }
  }
  .branch_lists {
    padding: 0.5rem 0 0;
    .weui-cells {
      margin: 0;
    }
    .weui-cell {
      padding: 0.75rem 1.125rem 0.75rem 0.8125rem;
    }
    .vux-cell-primary {
      text-align: left;
    }
    .vux-label {
      font-size: 1.125rem;
    }
    .weui-cell__ft {
      font-size: 1rem;
      color: rgb(214, 60, 50);
      padding-right: 1rem;
      .counts {
        font-size: 0.6875rem;
      }
    }
    .weui-cell_icon {
      display: block;
      width: 1.6875rem;
      margin-right: 0.375rem;
    }
  }
}
.select_year {
  display: inline-block !important;
}
</style>
